import { Button, Col, Row, Dropdown, Image, Typography } from 'antd'
import { MailOutlined, LikeOutlined, TeamOutlined } from '@ant-design/icons'

import ItemCardTop from '@/components/main-content/cards/item-card-top'

import '@/styles/main-content/card.css'

const { Text } = Typography

const Card = () => {
  return (
    <>
      <div className="card-style">
        {/* <div
          style={{ display: 'flow', zIndex: 1, width: '100%', height: '100%' }}
        > */}
        <div className="card-content-style">
          <div className="card-content-style-mask">mask</div>
          <Image src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" />
        </div>
        {/* </div> */}
        {/* 下面是图片的底部 */}
        <div className="card-bottom-style">
          <Row justify="space-around" style={{ height: '100%' }}>
            <Col span={20}>
              <Dropdown
                className="card-bottom-style-left"
                overlay={ItemCardTop}
                placement="topLeft"
                arrow
              >
                {/* <Button type="link" className="card-bottom-style-left"> */}
                <Button type="link">
                  <MailOutlined />
                  topCenter
                  <TeamOutlined />
                </Button>
              </Dropdown>
            </Col>
            <Col span={4}>
              <div className="card-bottom-style-right">
                <Text className="card-bottom-style-right-text">20</Text>
                <Text className="card-bottom-style-right-text">
                  <LikeOutlined />
                  199
                </Text>
              </div>
            </Col>
          </Row>
        </div>
      </div>
    </>
  )
}

export default Card
